<template>
  <!-- 工艺参数监控规则表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="800px"
      draggable
      @close="closeDialog"
      destroy-on-close
      align-center
      class="maxhDialog2"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        :rules="rules"
        label-width="106"
        v-show="!props.isReadonly"
      >
        <el-row>
          <el-form-item label="变更内容" style="width: 100%">
            <el-input
              type="textarea"
              v-model="props.diffText"
              disabled
              :rows="5"
            />
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="变更原因" prop="remarks" style="width: 100%">
            <el-input type="textarea" v-model="formData.remarks" :rows="5" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="责任人" prop="createUserName">
            {{ formData.createdUserName }}
          </el-form-item>
          <el-form-item label="变更时间 " prop="createTime">
            {{ formData.createTime }}
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定
          </el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getUserInfo } from "@/api/user/index";
import request from "@/utils/request";
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { validateNumber, validateNumberCanNot1 } from "@/utils/commonHooks";
import { getMdmProcessEquipApi } from "@/utils/commonData";
import dayjs from "dayjs";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PSMPARAMITEMCONTRASTDIFF",
  inheritAttrs: false,
});

const emit = defineEmits(["change-visible", "handle-submit"]);

const initUser = async () => {
  await getUserInfo().then(({ data }) => {
    formData.createdUserName = data.userName;
    formData.createdUserId = data.userId;
    formData.createTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  });
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  diffText: {
    type: String,
    default: () => {
      return "";
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.beforeData = "";
  formData.afterData = "";
  formData.enabled = 1;
  formData.deleted = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
}

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (newVal) {
      initUser();
    }
  }
);

const loading = ref(false);

/** formData定义表单数据 */
const formRef = ref(ElForm);
const formData = reactive({
  id: "",
  beforeData: "",
  afterData: "",
  enabled: 1,
  deleted: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
});

const rules = reactive({
  remarks: [{ required: true, message: "请输入变更原因", trigger: "change" }],
});

const handleSubmit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const parse = JSON.parse(JSON.stringify(formData));
      emit("handle-submit", parse);
      closeDialog();
      loading.value = false;
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.maxhDialog2 .el-dialog__body) {
  overflow-y: auto;
  padding: 20px;
}
</style>
